<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>初心博客</title>
    <link rel="stylesheet" href="./css/enter.css">
</head>

<body>
    <!-- 登录页面开始 -->
    <div id="divbg">
        <div class="register">
            <div class="register-left">
                <h2>登录后台</h2>
                <div class="register-left-ipt">
                    <span class="l">&#xe686;</span>
                    <input type="username" placeholder="用户名" class="user">
                    <span class="empty"></span>
                </div>
                <div class="register-left-ipt">
                    <span class="l">&#xe627;</span>
                    <input type="password" placeholder="用户密码" class="psd">
                    <span class="emptys"></span>
                </div>
                <div class="enter"><a href="#">登录</a></div>
            </div>
        </div>
    </div>
    <!-- 登录页面结束 -->
</body>

</html>
<script src="./dist/jquery-3.4.0.min.js"></script>
<script>
    // 1、先写一个Ajax的函数，确定封装是否成功，可以用到获取数据
    // 2、再写一个点击事件,声明一个data对象获取username和possword的val值
    // 2、再写ajax
    // 3、最后做判断
    //封装一个获取myAjax函数
    function myAjax(obj) {
        return new Promise(function(resolve, reject) {
            $.ajax({
                type: obj.type || 'get',
                url: obj.url || 'http://192.168.1.26:3000/api/admin/login',
                dataType: obj.dataType || 'json',
                data: obj.data || {},
                success: function(rows) {
                    resolve(rows)
                }
            })
        })
    }
    // myAjax({
    //     type: 'post',
    //     url: 'http://192.168.1.26:3000/api/admin/login',
    //     dataType: 'json'
    // }).then(data => {
    //     console.log(data)
    // })
    $('.enter').click(function() { //设置点击事件
        var data = { //声明data对象，对象是获取我们输入登录框的数据，也就是登录类名val()
            username: $('.user').val(),
            password: $('.psd').val()
        };
        myAjax({ //前面封装的函数，这里可以直接调用，函数名（）是函数调用
            type: 'post',
            url: 'http://192.168.1.26:3000/api/admin/login',
            dataType: 'json',
            data: data
        }).then(data => { //.then是Ajax的写法
            console.log(data) //这里打印可以检查是否传值成功
            if (data.code == 200 && data.msg == "登录成功") { //if判断应该写在.then后面
                console.log(123)
                location.href = 'file://mac/Home/Desktop/cxbk/index.html' //跳转地址
            } else if (data.code == 100) {
                alert('登录失败')
            }
        });
    });
    //
    //表单验证
    //js进行用户注册   主要有两大步  获取焦点的时候和失去焦点的时候
    //1.获取焦点的时候   ----给对应的input表单添加样式
    //2.失去焦点的时候  
    //-1.获取input 表单里用户输入的值    if  如果为空给用户相应的提示 " * 用户名不能为空 "
    //-2.写一个正则  获取的值和正则比对如果不符合给出相应的提示  " * 用户名格式不符合 "
    //获取焦点
    //失去焦点
    $('.user').blur(function() {
        var reg = /^[a-zA-Z]{1}/;
        var value = $(this).val().trim();
        if (!value) {
            $('.empty').html('请输入用户名')
        } else if (!reg.test(value)) {
            $('.empty').html('请输入正确的用户名');
            return false
        } else {
            $('.empty').html('')
        }
    });
    $('.psd').blur(function() {
            var reg = /^[a-zA-Z]{1}/;
            var value = $(this).val().trim();
            if (!value) {
                $('.emptys').html('请输入用户名')
            } else if (!reg.test(value)) {
                $('.emptys').html('请输入正确的用户名')
                return false
            } else {
                $('.emptys').html('')
            }
        })
        //
        //
        //
        //计时器
        // var timeId = setInterval(function() {
        //     var x = 0;
        //     $('.contain').css({
        //         backgroundPositionX = 'x + "px"',
        //         x = x + 2
        //     })
        // }, 100)
    var divbg = document.getElementById("divbg"); //获取div
    var x = 0;
    //    var y=0;//定义垂直方向初始距离
    var divbgTimer = setInterval(moveBg, 50); //设置调用这个方法的定时器，50ms调用一次
    function moveBg() { //背景移动函数
        divbg.style.backgroundPositionX = x + "px"; //对div对象的背景图片进行移动
        x = x + 2; //向右移动
        //        divbg.style.backgroundPositionY=y+"px";
        //        y=y+2;//向下移动
    }
</script>